<template>
  <div class="fa-image-setting">
    <ElFormItem prop="aspect" label="比例">
      <ElSelect
        v-model="data.image.aspect"
        popper-class="fa-contract-scope"
        :disabled="disabled"
        placeholder="请选择图片比例"
      >
        <ElOption v-for="(item, index) in aspectOptions" :key="index" :value="item.ratio" :label="item.text" />
      </ElSelect>
    </ElFormItem>

    <ElRow :gutter="8">
      <ElCol :span="10">
        <ElFormItem prop="w" label="宽度">
          <ElInputNumber
            class="size-number"
            v-model="data.w"
            :controls="false"
            :precision="0"
            :min="data.sizeRange.minW"
            :max="data.sizeRange.maxW"
            :disabled="disabled"
            @change="updateWidth"
          />

          <div class="unit">px</div>
        </ElFormItem>
      </ElCol>

      <ElCol class="link-btn__col" :span="4">
        <i
          class="link-btn fa-icon-linked"
          :class="{ 'is-active': !!data.image.aspect }"
          :title="data.image.aspect ? '保持宽高比例' : '不限宽高比例'"
        ></i>
      </ElCol>

      <ElCol :span="10">
        <ElFormItem prop="h" label="高度">
          <ElInputNumber
            class="size-number"
            v-model="data.h"
            :controls="false"
            :precision="0"
            :min="data.sizeRange.minH"
            :max="data.sizeRange.maxH"
            :disabled="disabled"
            @change="updateHeight"
          />

          <div class="unit">px</div>
        </ElFormItem>
      </ElCol>
    </ElRow>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, watch, toRef, nextTick } from 'vue'
import { ImageAspect, ImageAspectMap, ImageAspectItem } from '@/types'
import { Widget } from '@/models'

/** 图片设置 */
export default defineComponent({
  name: 'FaImageSetting',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    /** 比例 */
    const aspectItem = computed(
      () => ImageAspectMap.get(props.data.image.aspect) || (ImageAspectMap.get(ImageAspect.NONE) as ImageAspectItem)
    )

    /** 是否比例反转，宽高切换 */
    function isAspectInvert(ratio: ImageAspect, old: ImageAspect) {
      if (!ratio || !old) return false

      const ratioArr = ratio.replace(/\s/g, '').split(':')
      const oldArr = old.replace(/\s/g, '').split(':')

      return ratioArr[0] === oldArr[1] && ratioArr[1] === oldArr[0]
    }

    /** 宽高比变化 */
    watch(aspectItem, async (item, old) => {
      const widget = props.data
      const ratio = item.value

      // 不约束比例
      if (!ratio) return

      await nextTick()

      // 宽高反转比例
      if (isAspectInvert(item.ratio, old.ratio)) {
        widget.setWidth(widget.h)
      } else {
        widget.setWidth(widget.w)
      }
    })

    return {
      /** 图片比例选项 */
      aspectOptions: [...ImageAspectMap.values()],

      /** 更新宽度 */
      updateWidth(w: number) {
        props.data.setWidth(w)
      },

      /** 更新高度 */
      updateHeight(h: number) {
        props.data.setHeight(h)
      }
    }
  }
})
</script>

<style lang="scss">
.fa-image-setting {
  .size-number {
    width: 100%;

    .el-input__inner {
      padding-right: 24px;
      padding-left: 12px;
      text-align: left;
    }
  }

  .unit {
    position: absolute;
    top: 50%;
    right: 0;
    width: 24px;
    margin-top: -13px;
    color: $color-text-regular;
    line-height: 24px;
  }

  .link-btn {
    color: $color-info-light;
    font-size: 16px;
    vertical-align: middle;
    user-select: none;

    &__col {
      padding-top: 33px;
      text-align: center;
    }

    &.is-active {
      color: $color-primary;
    }
  }
}
</style>
